<template>
  <div class="button" @click="clickHandle">
    <button v-show="!loading" :style="{background: bgColor}">{{ text }}</button>
    <div v-show="loading" class="button-loading">
      <mt-spinner
        :type="0"
        color="#ff4133"
        :size="20"></mt-spinner>
    </div>
  </div>
</template>

<script>
  import { Spinner } from 'mint-ui'

  export default {
    props: {
      text: {
        type: String,
        default: '立即出借'
      },
      loading: {
        type: Boolean,
        default: false
      },
      bgColor: {
        type: String,
        default: '#ff4133'
      }
    },
    methods: {
      clickHandle () {
        this.$emit('click')
      }
    },
    components: {
      mtSpinner: Spinner
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/index.scss';

  .button {
    display: inline-block;
    width: 570px;
    height: 90px;
    button {
      border: none;
      outline: none;
      width: 100%;
      height: 100%;
      line-height: 90px;
      background: $base-ff6c00;
      color: $base-fff;
      font-size: 36px;
      border-radius: 1000px;
      user-select: none;
    }
    &-loading {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 570px;
      height: 90px;
      background: $base-fff;
      border: 1px solid $base-ff6c00;
      border-radius: 45px;
    }
  }
</style>
